<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Start machine</title>
</head>
<body>
    <button>Start machine</button>
    <p>The machine is stopped.</p>
    <script>
    var btn = document.querySelector("button");
    var txt = document.querySelector("p");

    btn.addEventListener("click", updateBtn);

    function updateBtn(){
        if(btn.textContent == "Start machine"){
            btn.textContent = "Stop machine";
            txt.textContent = "The machine is started!";
        }else{
            btn.textContent = "Start machine";
            txt.textContent = "The machine is stopped!"
        }
    }

     // 大写修正 lonDon => London
     var list = document.querySelector('.output ul');
        list.innerHTML = '';
        var cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];
        for(var i = 0; i < cities.length; i++) {
            var input = cities[i];
            // write your code just below here
            var inputLower = input.toLowerCase();
            var firstLettUp = inputLower.slice(0,1).toUpperCase();
            input = inputLower.replace(inputLower[0],firstLettUp);
            var result = input;
            var listItem = document.createElement('li');
            listItem.textContent = result;
            list.appendChild(listItem);
        }

        //从原先部分得到新字符串 输出MAN: Manchester Piccadilly
        var list = document.querySelector('.output ul');
        list.innerHTML = '';
        var stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
                        'GNF576746573fhdg4737dh4;Greenfield',
                        'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',
                        'SYB4f65hf75f736463;Stalybridge',
                        'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];

        for (var i = 0; i < stations.length; i++) {
            var input = stations[i];
            // write your code just below here   
            var letter = input.slice(0,3);
            var index = input.indexOf(';');
            var station = input.slice(index + 1);
            input = letter + ': ' + station;
            var result = input;
            var listItem = document.createElement('li');
            listItem.textContent = result;
            list.appendChild(listItem);
        }
    </script>
</body>
</html>